<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>📕</title>
<style>

	:root {
		--primary-color: #242424;
		--hover-color: #357abd;
		--bg-color: #f5f7fa;
		--text-color: #333;
		--border-radius: 8px;
		--shadow: 0 2px 8px rgba(0,0,0,0.1);
		--alert-color: #F0F0F0CC;
	}
	
	body {
		background: var(--bg-color);
		color: var(--text-color);
		line-height: 1.6;
		overflow-x: hidden;
		margin: 8px 0;/* 覆盖用户默认代理样式 */
	}

	/* 按钮 */
	button {
		padding: 8px 16px;
		background: #FFFFFF;
		color: #333;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.3s;
		margin-left: 10px;
		box-shadow: var(--shadow);
	}
	
	button:hover {
		background: #DDDDDD;
	}

	/* 开关按钮 */
	/* 容器基础样式 */
	.theme-switch {
		--width: 64px;
		--height: 32px;
		--padding: 4px;
		--transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
		position: relative;
		display: inline-block;
		width: var(--width);
		height: var(--height);
	}

	/* 隐藏原生复选框 */
	.theme-switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	/* 滑动轨道 */
	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #2c3e50;
		transition: var(--transition);
		border-radius: 34px;
		box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
	}

	/* 滑动按钮 */
	.slider:before {
		content: "";
		position: absolute;
		height: calc(var(--height) - var(--padding)*2);
		width: calc(var(--height) - var(--padding)*2);
		left: var(--padding);
		bottom: var(--padding);
		background: linear-gradient(145deg, #f1c40f, #f39c12);
		border-radius: 50%;
		transition: var(--transition);
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	/* 暗黑模式激活状态 */
	input:checked + .slider {
		background: #3498db;
	}

	input:checked + .slider:before {
		transform: translateX(calc(var(--width) - var(--height)));
		background: linear-gradient(145deg, #ecf0f1, #bdc3c7);
	}

	/* 日月图标（纯CSS绘制） */
	.slider:after {
		content: "🌙";
		position: absolute;
		right: 8px;
		top: 50%;
		transform: translateY(-50%);
		color: rgba(255,255,255,0.8);
		font-size: 14px;
		transition: opacity 0.3s;
	}

	input:checked + .slider:after {
		content: "☀️";
		left: 8px;
		right: auto;
		color: rgba(0,0,0,0.8);
	}
	
	/* 输入区 */
	textarea {
		margin: 28px 20%;
		width: 60%;
		height: 45vh;
		padding: 20px;
		border: none;
		outline: none;
		appearance: none;
		font-size: 30px;
		font-family: "Curlz MT", "Comic Sans MS", cursive;
		line-height: 1.6;
		background: #FFFFFF;
		word-break: break-all;
		box-shadow: var(--shadow);
		scrollbar-width: none;
	  
		/* 保持默认竖向拖拽功能 */
		resize: vertical; /* both/vertical/horizontal 支持双向拉伸 */

		/* 隐藏 WebKit 内核的调整手柄图标 */
		&::-webkit-resizer {
			background: transparent;
			opacity: 0;
		}
	  
		transition: 0.3s;
		&:active {
			box-shadow: 0 0 8px rgba(0,123,255,0.3)!important;
		}
	}
	
	textarea::-webkit-scrollbar {
	  display: none;/* WebKit 内核 */
	}
	
	/* 主题切换开关、字数统计 */
	.container, .container_left {
		position: fixed;/* 使div保持在页面的固定位置 */
		bottom: 1.5rem;
		background: white;
		border-radius: 20px;
		box-shadow: var(--shadow);
		font-size: 0.9rem;
	}
	
	.container_left {
		left: 1.5rem;
		padding: 0.3rem 0.3rem;
	}
	
	
	/* 字数统计 */
	.container {
		right: 1.5rem;
		padding: 0.6rem 1.2rem;
	}
	
	/* 拖拽区域提示 */
	.drag-hint {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 20px;
		background: var(--alert-color);
		border-radius: 8px;
	}
	
	/* 黑暗模式样式 */
	body.dark-mode {
		--bg-color: #1a1a1a;
		--text-color: #ffffff;
		--primary-color: #f0f0f0;
		--alert-color: #000000CC;
	}

	body.dark-mode textarea {
		background: #3d3d3d;
		color: #e0e0e0;
		box-shadow: 0 2px 8px rgba(255,255,255,0.1);
	}

	body.dark-mode .container,
	body.dark-mode .container_left {
		background: #333;
		color: #fff;
	}

	body.dark-mode button {
		background: #444;
		color: #fff;
	}

	body.dark-mode button:hover {
		background: #555;
	}

</style>
</head>
<body>
<!--隐藏区-->
<input type="file" id="fileInput" accept=".txt" style="display: none;">
<div class="drag-hint" id="dragHint">松开鼠标导入文件</div>

<!--工具栏-->
<div id="topDiv">
	<button onclick="document.getElementById('fileInput').click()">打开</button>
	<button onclick="saveFile()" title="Ctrl + s">保存</button>
	<button onclick="adjustFontSize(2)">字+</button>
	<button onclick="adjustFontSize(-2)">字-</button>
	<button onclick="clearEditor()">清空</button>
	<button onclick="hideButtonBar()" title="Ctrl + q 隐藏/显示按钮区" >⚙️</button>
</div>

<textarea id="editor" placeholder="开始输入或拖入文件..."></textarea>

<span id="containerLeft" class="container_left">
	<label class="theme-switch">
		<input type="checkbox" id="themeToggle">
		<span class="slider"></span>
	</label>
</span>
<span id="wordCount" class="container">字数: 0</span>
</body>
<script>

	// textarea对象
	const editor = document.getElementById('editor');
	// 文本内容存储在localStorage的key
	const STORAGE_KEY = 'auto_save_content';
	// 拖拽文件提示窗对象
	const dragHint = document.getElementById('dragHint');
	// 切换主题开关对象
	const themeToggle = document.querySelector('.theme-switch input');
	// documentElement
	const root = document.documentElement;

	// 初始化加载保存内容
	document.addEventListener('DOMContentLoaded', () => {
		// 加载文本内容
		const savedContent = localStorage.getItem(STORAGE_KEY);
		if(savedContent) editor.value = savedContent;
		else editor.value = '　　';
		// 光标获取焦点
		editor.focus();
		// 主动触发监听事件
		editor.dispatchEvent(new Event("input", { bubbles: true }));
		// 初始化主题 检测浏览器当前主题模式
		toggleDarkMode(!window.matchMedia('(prefers-color-scheme: dark)').matches);
	});
	
	// 段落首行缩进
	editor.addEventListener('keydown', (e) => {
	  if (e.key === 'Enter') {
		e.preventDefault(); // 阻止默认换行行为
		const startPos = editor.selectionStart;
		const endPos = editor.selectionEnd;
		const value = editor.value;
		
		// 插入换行符 + 两个中文空格
		const newValue = value.substring(0, startPos) +  '\n　　' + value.substring(endPos);
		editor.value = newValue;
		
		// 调整光标到新位置（换行后第3字符处）
		const newCursorPos = startPos + 3;
		editor.setSelectionRange(newCursorPos, newCursorPos);
	  }
	});
	
	// 监听input事件
	editor.addEventListener('input', function() {
		// 获取文本内容并计算字数
		const wordCount = editor.value.replace(/\s+/g, '').length;
		// 更新显示的字数
		document.getElementById('wordCount').textContent = `字数: ${wordCount}`;
		// 自动保存
		localStorage.setItem(STORAGE_KEY, editor.value);
	});
	
	// 打开
	document.getElementById('fileInput').addEventListener('change', function(e) {
		const file = e.target.files[0];
		if(file && file.type === 'text/plain') readFile(file);
	});
	
	// 保存
	function saveFile() {
		let fileName = prompt("请输入文件名", Date.now());
		if (fileName) {
			const blob = new Blob([editor.value], {type: 'text/plain'});
			const url = URL.createObjectURL(blob);
			const a = document.createElement('a');
			a.href = url;
			a.download = fileName + '.txt';
			a.click();
		}
	}
	
	// 字+-
	function adjustFontSize(change) {
		const current = parseInt(getComputedStyle(editor).fontSize);
		const newSize = Math.max(12, current + change);
		editor.style.fontSize = `${newSize}px`;
		editor.focus();
	}
	
	// 清空
	function clearEditor() {
		if(confirm('确定要清空所有内容吗？')) {
			editor.value = '　　';
			localStorage.removeItem(STORAGE_KEY);
			// 光标获取焦点
			editor.focus();
			document.getElementById('wordCount').textContent = '字数: 0';
		}
	}
	
	// 隐藏/显示按钮区
	function hideButtonBar(){
		let topDiv = document.getElementById('topDiv');
		let containerLeft = document.getElementById('containerLeft');
		if (topDiv.style.display === 'none') {
			topDiv.style.display = 'block';
			containerLeft.style.display = 'block';
		} else {
			topDiv.style.display = 'none';
			containerLeft.style.display = 'none';
		}
	}
	
	// 拖拽文件处理
	editor.addEventListener('dragover', (e) => {
		e.preventDefault();
		dragHint.style.display = 'block';
	});

	editor.addEventListener('dragleave', () => {
		dragHint.style.display = 'none';
	});

	editor.addEventListener('drop', (e) => {
		e.preventDefault();
		dragHint.style.display = 'none';
		const file = e.dataTransfer.files[0];
		if(file && file.type === 'text/plain') readFile(file);
	});
	
	// 文件读取通用方法
	function readFile(file) {
		const reader = new FileReader();
		reader.onload = function(e) {
			editor.value = e.target.result;
			localStorage.setItem(STORAGE_KEY, editor.value);
			// 光标获取焦点
			editor.focus(); 
			// 主动触发监听事件
			editor.dispatchEvent(new Event("input", { bubbles: true }));
		}
		reader.readAsText(file); 
	}
	
	// 快捷键监听
	document.addEventListener('keydown', function(e) {
		// 隐藏/显示按钮区
		if (e.ctrlKey && e.key === 'q') hideButtonBar();
		// 保存
		if (e.ctrlKey && e.key.toLowerCase() === 's') {
			// 停止浏览器原生快捷键执行方法
			e.preventDefault();
			// 执行自定义保存逻辑
			saveFile();
		}
	});
	
	// 切换主题颜色
	function toggleDarkMode(isDark) {
		if (isDark) {
			root.style.setProperty('--bg-color', '#f5f7fa');
			root.style.setProperty('--text-color', '#333');
			root.style.setProperty('--primary-color', '#242424');
			document.body.classList.remove('dark-mode');
		} else {
			root.style.setProperty('--bg-color', '#1a1a1a');
			root.style.setProperty('--text-color', '#ffffff');
			root.style.setProperty('--primary-color', '#f0f0f0');
			document.body.classList.add('dark-mode');
		}
		themeToggle.checked = isDark;
	}

     // 监听切换主题开关按钮事件
	themeToggle.addEventListener('change', (e) => {
		toggleDarkMode(e.target.checked);
	});

	// 监听系统主题变化
	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
		toggleDarkMode(!e.matches);
	});
	
	// 关闭提醒
	//window.onbeforeunload = e => {
	//	e.returnValue = '您有未保存的内容';
	//	return e.returnValue;
	//};
</script>
</html>